window.onload = function () {
    var btn_play = document.getElementById("btn-play"),
        media = document.getElementById("media"),
        curTimeSpan = document.getElementById("curTime"),
        endTimeSpan = document.getElementById("endTime"),
        audioProgressbar = document.querySelector(".audioProgress-bar"),
        volumeProgressbar = document.querySelector(".volumeProgress-bar"),
        audioprogress = document.getElementById("audioProgress"),
        volumeprogress = document.getElementById("volumeProgress");

    btn_play.addEventListener('click', function () {
        var self = this;
        if (media.paused) {
            self.classList.remove("pause");
            self.classList.add("play");
            media.play();
        } else {
            self.classList.remove("play");
            self.classList.add("pause");
            media.pause();
        }
    });

    // $('.audioList>li').click(function(){
    //     console.log($(this));

    // })
    var timer,
        dragging = false;

    function audioAutoPlay(id) {
        var audio = document.getElementById(id);
        audio.play();
        audio.onended = function () {
            //   结束播放的时候添加和删除类名控制播放按钮的样式
            $('#btn-play').addClass('pause')
            $('#btn-play').removeClass('play')
        }
    }

    timer = setInterval(function () {
        if (!media.paused) {
            calculation();
        }
    }, 1000);

    // 音乐进度条
    audioProgressbar.onclick = function (e) {
        media.currentTime = (e.offsetX / audioProgressbar.clientWidth) * media.duration;
        calculation();
        audioAutoPlay('media');
    };

    function calculation() {
        // 计算当前时间
        var curTime = Math.floor(media.currentTime),
            curMinute = Math.floor(curTime / 60) < 10 ? "0" + Math.floor(curTime / 60) : Math.floor(curTime / 60),
            curSecond = curTime % 60 < 10 ? "0" + curTime % 60 : curTime % 60;

        curTimeSpan.innerHTML = curMinute + ":" + curSecond;

        // 计算结束时间
        var endTime = Math.floor(media.duration),
            endMinute = Math.floor(endTime / 60) < 10 ? "0" + Math.floor(endTime / 60) : Math.floor(endTime / 60),
            endSecond = endTime % 60 < 10 ? "0" + endTime % 60 : endTime % 60;

        endTimeSpan.innerHTML = endMinute + ":" + endSecond;

        // 计算进度条长度
        var progressInner = curTime / endTime * 100;
        audioprogress.style.width = progressInner + "%";
        // audiocontrol.style.left = progressInner + "%";

    }


    // 设置播放按钮状态
    function playing(status) {
        console.log(status);

        // if (!status) {
        //     btn_play.classList.remove("play");
        //     btn_play.classList.add("pause");
        // } else {
        //     btn_play.classList.remove("pause");
        //     btn_play.classList.add("play");
        // }
        btn_play.classList.add("play");
    }

    // 切换音频
    function changeAudio(type) {
        var a, audio, method;

        a = document.getElementsByClassName("audioList")[0];
        method = type === 'next' ? 'nextElementSibling' : 'previousElementSibling';
        audio = a.getElementsByClassName("play")[0][method];

        if (audio != null) {
            tab(audio, "play");
            media.src = audio.getAttribute("data-src");
            document.getElementById("audioName").innerHTML = audio.children[0].innerHTML;
            audioAutoPlay('media');
            playing();
        }
    }

    var audioList = document.getElementsByClassName("audioList")[0].children;

    // 初始化
    media.src = audioList[0].getAttribute("data-src");
    document.getElementById("audioName").innerHTML = audioList[0].children[0].innerHTML;

    // 点击列表播放
    for (var i = 0; i < audioList.length; i++) {
        (function (i) {
            audioList[i].onclick = function () {
                console.log(this);   //点击播放

                console.log($('#btn-play').addClass('play'));
                console.log($('#btn-play').removeClass('pause'));

                media.src = this.getAttribute("data-src");
                document.getElementById("audioName").innerHTML = this.children[0].innerHTML;
                tab(audioList[i], "play");
                audioAutoPlay('media');
                playing();
            }
        })(i)
    }

    // 下一首
    audionext.onclick = function () {
        changeAudio('next');
    }

    // 上一首
    audioprev.onclick = function () {
        changeAudio('prev');
    }

    // 音量控制
    volumeProgressbar.onclick = function (e) {
        // 设置音量
        media.volume = e.offsetX / volumeProgressbar.clientWidth;
        // 设置音量进度条
        volumeprogress.style.width = e.offsetX / volumeProgressbar.clientWidth * 100 + "%";
    }


};


function getOffsetLeft(className) {
    var result = 0;

    var obj = document.querySelector(className);

    do {
        result += obj.offsetLeft;
        if (obj.parentNode.classList.contains('footer')) {
            return result;
        } else {
            obj = obj.parentNode;
        }
    } while (obj.parentNode);

    return result;
}